<template>
  <a-modal
    :title="'易盾审核记录'"
    :visible="true"
    width="60%"
    :footer="null"
    @cancel="reset"
  >
    <a-table
      bordered
      :columns="columns"
      :rowKey="record => record.id"
      :data-source="dataSource"
      :scroll="{ x: true }"
    >
      <span
        slot="states"
        slot-scope="txt,record"
      >
        <span v-if="record.yidunSuggestion == 0">通过</span>
        <span v-if="record.yidunSuggestion == 1">嫌疑</span>
        <span v-if="record.yidunSuggestion == 2">不通过</span>
        <span v-if="record.yidunSuggestion == -1">无</span>
      </span>

        
      <template
        slot="url"
        slot-scope="txt, record"
      >
        <div style="width:80px;height:80px">
          <img
            style="width: 100%;height: 100%;object-fit: scale-down;"
            :src="record.url"
            :alt="record.url"
          >
        </div>
      </template>
      <template
        slot="action"
        slot-scope="txt, record"
      >
        <a
          v-if="record.dataId"
          class="mr-10"
          @click="showHistory(record)"
        >
          查询
        </a>
      </template>
    </a-table>
    <a-modal
      :title="'易盾审核日志查询'"
      :visible="visible"
      width="60%"
      :footer="null"
      @cancel="resetHistory"
    >
      <a-table
        bordered
        :columns="inncolumns"
        :rowKey="record => record.id"
        :data-source="historyList"
        :scroll="{ x: true }"
      >
        <span
          slot="states"
          slot-scope="txt,record"
        >
          <span v-if="record.yidunSuggestion == 0">通过</span>
          <span v-if="record.yidunSuggestion == 1">嫌疑</span>
          <span v-if="record.yidunSuggestion == 2">不通过</span>
          <span v-if="record.yidunSuggestion == -1">无</span>
        </span>
        <span
          slot="yidunExamineType"
          slot-scope="txt,record"
        >
          <span v-if="record.yidunExamineType == 1">机审</span>
          <span v-if="record.yidunExamineType == 2">人审</span>
        </span>
        <template
          slot="url"
          slot-scope="txt, record"
        >
          <div style="width:80px;height:80px">
            <img
              style="width: 100%;height: 100%;object-fit: scale-down;"
              :src="record.url"
              :alt="record.url"
            >
          </div>
        </template>
      </a-table>
    </a-modal>
  </a-modal>
</template>

<script>
const columns = [
  {
    title: '颜色名称',
    dataIndex: 'name'
  },
  {
    title: '图片',
    scopedSlots: { customRender: 'url' }
  },
  {
    title: '易盾建议',
    scopedSlots: { customRender: 'states' }
  },
  {
    title: '易盾检测说明',
    dataIndex: 'yidunExplain'
  },
  {
    title: '审核日志',
    width: 100,
    scopedSlots: { customRender: 'action' }
  }
]
const inncolumns = [
  {
    title: '易盾建议',
    scopedSlots: { customRender: 'states' }
  },
  {
    title: '易盾检测说明',
    dataIndex: 'yidunExplain'
  },
  {
    title: '易盾审核类型',
    dataIndex: 'yidunExamineType',
    scopedSlots: { customRender: 'yidunExamineType' }

  },
  {
    title: '易盾审核时间',
    dataIndex: 'yidunExamineDate'
  }
]
import { getYidunHistory } from '@api/pattern/index.js'

export default {
  props: {
    patternId: {
      type: [Number, String],
      default: ''
    },
    ifTag: {
      type: [Number, String],
      default: ''
    }
  },

  data() {
    return {
      columns,
      inncolumns,
      dataSource: [],
      historyList: [],
      visible: false
    }
  },

  computed: {
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },

  created() {
    this.loadData()
  },

  methods: {
    async loadData() {
      const data = {
        patternId: this.patternId
      }
      if(this.patternId){
        const res = await getYidunHistory('query', data)
      if (res.code == 200) {
        this.dataSource = res.data
      } else {
        this.$message.error(res.msg || res.message)
      }
      }else{
        this.$message.error('无数据！')

      }
    },
    reset() {
      this.$emit('closeYidun')
    },
    async showHistory(record) {
      this.visible = true
      const data = {
        dataId: record.dataId
      }
      const res = await getYidunHistory('log/query', data)
      if (res.code == 200) {
        this.historyList = res.data
      } else {
        this.$message.error(res.msg || res.message)
      }
    },
    resetHistory() {
      this.visible = false
    }
  }
}
</script>

<style scoped lang="less">
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
.ml-20 {
  margin-left: 20px;
}
.poster {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  position: relative;
  &:hover {
    .img-modal {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .img {
    width: 100%;
    height: 100%;
  }
  .img-modal {
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    position: absolute;
    color: #fff;
    font-size: 20px;
    width: 100%;
    top: 0;
    height: 100%;
    left: 0;
  }
}
.fileList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.tips {
  margin-left: 5px;
  cursor: pointer;
}
</style>
